<template>
    <div>
        <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="onClickLeft" />
        <img :src="img" alt="">
        <h4>{{ title }}</h4>
        <p>{{ price }}</p>

        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" @click="toCart" />
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addcart(route.query)" />
            <van-action-bar-button type="danger" text="立即购买" @click="toOrder" />
        </van-action-bar>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore()
// 点击加入购物车，把数据存进仓库的数组中
const addcart = (item) =>{
    store.addItem(item)
}
// 返回上一页
const onClickLeft = () => history.back();

// 获取地址栏参数存起来展示在页面中
const route = useRoute()

// 地址栏参数存进变量
const img = ref(route.query.img)
const title = ref(route.query.title)
const price = ref(route.query.price)

const router = useRouter()

const toCart = () =>{
    router.push({
        path: '/cart'
    })
}
// 跳转到订单页
const toOrder = () =>{
    router.push({
        path: '/order'
    })
}

</script>

<style scoped>
img {
    width: 100%;
}
</style>